<template>
  <div class="order">
    <!-- 搜索条件 -->
    <el-form
      ref="orderForm"
      :model="orderForm"
      label-width="80px"
      size="small"
      :inline="true"
    >
      <el-form-item label="openId">
        <el-input v-model="orderForm.openid"></el-input>
      </el-form-item>
      <el-form-item label="订单标题">
        <el-input v-model="orderForm.title"></el-input>
      </el-form-item>
      <el-form-item label="订单类型">
        <el-select v-model="orderForm.type" placeholder="请选择订单类型">
          <el-option label="快递" value="0"></el-option>
          <el-option label="购物" value="1"></el-option>
          <el-option label="其他" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="orderForm.state" placeholder="请选择订单状态">
          <el-option label="未接单" value="0"></el-option>
          <el-option label="已接单" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
          <el-option label="已取消" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="orderForm.publish_time"
            style="width: 200%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查找</el-button>
      </el-form-item>
    </el-form>
    <!-- 订单列表 -->
    <div class="order-table">
      <el-table
        :data="formateList(orderList)"
        height="380"
        border
        style="width: 100%; max-width: 1500px"
      >
        <el-table-column prop="_id" label="订单编号" width="150" align="center">
        </el-table-column>
        <el-table-column
          prop="openid"
          label="openId"
          width="130"
          align="center"
        >
        </el-table-column>

        <!-- <el-table-column
          prop="publisher"
          label="发布人"
          width="130"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contact"
          label="联系方式"
          width="130"
          align="center"
        >
        </el-table-column> -->
        <el-table-column
          prop="title"
          label="订单标题"
          width="230"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="state"
          label="订单状态"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="订单类型"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="订单报酬"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column label="相关图片" width="200" align="center">
          <template slot-scope="scope">
            <el-image
              :preview-src-list="scope.row.picture"
              v-for="item in scope.row.picture"
              :key="item"
              :src="item"
              style="width: 50px; height: 50px; margin-right: 10px"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              @click="searchProcess(scope.row)"
              type="text"
              size="small"
              style="margin-right: 10px"
              >交易流程</el-button
            >
            <el-popconfirm
              title="确定要删除该订单吗？"
              @confirm="deleteOrder(scope.row)"
            >
              <el-button type="text" size="small" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改框 -->
    <el-dialog
      center
      title="交易流程"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <el-steps :active="processObj.state" align-center>
        <el-step
          title="发布时间"
          :description="processObj.publish_time"
        ></el-step>
        <el-step title="接单时间" :description="processObj.take_time"></el-step>
        <el-step
          title="完成时间"
          :description="processObj.finish_time"
        ></el-step>
        <el-step
          title="取消时间"
          :description="processObj.cancel_time"
        ></el-step>
      </el-steps>
    </el-dialog>
  </div>
</template>

<script>
import orderApi from "@/api/order";
export default {
  name: "Order",
  data() {
    return {
      // 条件查询表单
      orderForm: {
        openid: "",
        title: "",
        type: [],
        state: [],
        publish_time: "",
      },
      // 控制弹出框
      dialogVisible: false,
      // 数据列表
      orderList: [],
      // 交易流程
      processObj: {},
      type: ["快递", "购物", "其他"],
      state: ["未接单", "已接单", "已完成", "已取消"],
    };
  },
  created() {
    console.log("order created");
    this.getList();
  },
  methods: {
    // 获取订单列表
    async getList() {
      const res = await orderApi.getOrder();
      this.orderList = res.data;
    },
    // 查询
    async onSearch() {
      console.log("submit!");
      const res = await orderApi.searchOrder(this.orderForm);
      console.log(res);
      this.orderList = res.data;
    },
    // 删除订单
    async deleteOrder(row) {
      console.log(row._id);
      await orderApi.deleteOrder(row._id);
      // 删除提示弹窗
      this.$message({
        message: "删除成功",
        type: "success",
      });
      this.getList()
    },
    // 重组订单列表
    formateList(list) {
      // return list.map()
      return list.map((item) => {
        let tempItem = {
          ...item,
        };
        tempItem.state = this.state[tempItem.state];
        tempItem.type = this.type[tempItem.type];
        return tempItem;
      });
    },
    // 查看交易流程
    async searchProcess(row) {
      console.log(row);
      const res = await orderApi.searchProcess(row._id);
      this.processObj = res.data[0];
      console.log(this.processObj);
      this.processObj.publish_time = row.publish_time;
      let state = this.state.indexOf(row.state);
      this.processObj.state = state + 1;
      this.dialogVisible = true;
    },
    // 关闭修改框
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
.order {
  padding: 30px;
  .order-table {
    margin-top: 25px;
    margin-left: 10px;
  }
}
</style>
